<!--
 * @Descripttion:回款明细表格组件
-->
<template>
  <div>
    <div class="onAccount-table-wrap">
      <div class="table-box">
        <el-table
          :data="tableData"
          border
          @row-click="singleElection"
          v-loading="loading"
          element-loading-text="加载中..."
        >
          <el-table-column label="" width="30">
            <template #default="scope">
              <el-radio
                class="radio"
                v-model="templateSelection"
                :label="scope.row.id"
                :disabled="scope.row.pay_status == 0"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="id" label="账单编号">
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="name" label="账户名称">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="clerk.user_name"
            label="收银人"
          >
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="user_name" label="回款人">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="pay_money"
            label="回款金额（元）"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            align="center"
            prop="pay_list_text"
            label="支付方式"
          >
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" label="回款状态">
            <template #default="scope">
              <span> {{ repaymentStatusEnum[scope.row.pay_status] }}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip align="center" prop="create_time" label="回款时间">
          </el-table-column>
        </el-table>
      </div>
      <!--  <div class="total-desc">共1条</div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useOrderStore } from '@/stores/order'

// 定义props
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const orderStore = useOrderStore()

// 响应式数据
const repaymentStatusEnum = ref({
  0: '未回款',
  1: '已回款',
  2: '回款中'
})

// 选中当行表格数据
const templateSelection = ref('')

// 计算属性 - 使用Pinia store
const selectCreditRepaymentOrder = computed(() => orderStore.getSelectCreditRepaymentOrder)

// 监听器
watch(
  () => selectCreditRepaymentOrder.value?.id,
  (newV, oldV) => {
    console.log('newV====', newV)
    console.log('oldV====', oldV)

    if (!newV) {
      // 清空选中的当前行数据
      templateSelection.value = ''
    }
  },
  { immediate: true, deep: true }
)

// 方法
const singleElection = row => {
  if (row.pay_status == 0) {
    return
  }
  orderStore.updateSelectCreditRepaymentOrder(row)
  templateSelection.value = row.id
}
</script>

<style lang="scss" scoped>
:deep(.el-table) {
  border-radius: 12px;
}
:deep(.el-table__body-wrapper) {
  height: 680px;
  overflow-y: auto;
}
//滚动条整体的大小
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px !important;
  height: 0 !important;
}
//滚动条里滑动的滑块
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  height: 200px !important;
  background: #d2d2d2 !important;
  border-radius: 3px !important;
}
//滚动条底层样式
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  display: none !important;
}
:deep(.el-table th.el-table__cell) {
  background: #a85b62;
  color: #fff !important;
}
:deep(.el-input__inner) {
  border-radius: 12px;
}
//单选框选中的颜色
:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #7c0a03;
  background: #7c0a03;
}

.onAccount-table-wrap {
  width: 100%;
  background: #fff;
  border-radius: 0px 0px 0px 20px;
  box-sizing: border-box;
}
.table-box {
  width: 100%;
  border-radius: 12px;
}
.total-desc {
  margin-top: 30px;
  font-size: 14px;
  font-family:
    PingFang SC,
    PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
}
</style>
